<template>
  <view class="ithui-content">
    <view class="h5title">我的余额</view>
    <view class="ithui-view">
      <view class="view-info">
        <view class="userinfo">
          <view class="flex">
            <!--  <image
              class="userinfo-headimg"
              :src="userData.headimgurl"
              mode="aspectFill"
            /> -->
            <view class="flex-one">
              <view class="flex-one-text"
                >用户名：
                <!-- {{ userData.name }}({{ userData.id }}) -->
                {{ topDetails.nickname }}
              </view>
              <view class="flex-one-text"
                >手机号：
                {{ topDetails.phone }}
              </view>
            </view>
            <!--   <view class="arrow arrow-one" @click="showModal = true"
              ><span>名词解释</span></view
            > -->
          </view>
        </view>
        <u-modal
          :show="showModal"
          title="名词解释"
          confirm-text="我已知晓"
          @confirm="showModal = false"
          confirm-color="#ff1e0f"
        >
          <view class="slot-content">
            <p>
              <em style="font-style: normal; color: #ff1e0f">可提现余额：</em
              >当前可以提现的金额
            </p>
            <p>
              <em style="font-style: normal; color: #ff1e0f">即将到账：</em
              >交易中的金额，交易成功后可提现
            </p>
            <p>
              <em style="font-style: normal; color: #ff1e0f">累计到账：</em
              >累计交易成功的金额
            </p>
            <p>
              <em style="font-style: normal; color: #ff1e0f">累计提现：</em
              >累计提现成功的金额
            </p>
            <p>
              <em style="font-style: normal; color: #ff1e0f"
                >*注：所有金额币种均为人民币，单位为元，符号￥</em
              >
            </p>
          </view>
        </u-modal>

        <view class="box">
          <view class="tx">
            <view class="tx-grid">
              <view class="tx-grid-text">
                <view class="title">可提现余额</view>
                <view class="money">
                  <text>{{ income }}</text>
                  <text class="money-b">元</text>
                </view>
              </view>
            </view>
            <view class="tx-grid" @click="navTo()">
              <span class="tx-grid-comm-sign">立即提现</span>
            </view>
          </view>

          <view class="palace palace-one">
            <view class="palace-grid">
              <view class="palace-grid-text">
                <view class="palace-grid-text-data">
                  <text>{{ topDetails.coming_income }}</text>
                  <text class="palace-grid-text-data-b">元</text>
                </view>
                <view class="palace-grid-text-name">即将到账</view>
              </view>
            </view>
            <view class="palace-grid">
              <view class="palace-grid-text">
                <view class="palace-grid-text-data">
                  <text>{{ topDetails.all_income }}</text>
                  <text class="palace-grid-text-data-b">元</text>
                </view>
                <view class="palace-grid-text-name">累计到账</view>
              </view>
            </view>
            <view class="palace-grid">
              <view class="palace-grid-text">
                <view class="palace-grid-text-data">
                  <text>{{ topDetails.all_withdraw }}</text>
                  <text class="palace-grid-text-data-b">元</text>
                </view>
                <view class="palace-grid-text-name">累计提现</view>
              </view>
            </view>
          </view>
        </view>

        <view class="top">
          <view style="margin: 10px">
            <view
              style="
                margin: 5px;
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
              >自定义时间
              <view class="date-picker-wrapper">
                <view class="date-picker" @click="clickDatetimePicker(0)">
                  {{
                    formData.startDate ? formData.startDate : "请选择开始时间"
                  }}
                </view>
                <span class="date-separator">至</span>
                <view class="date-picker" @click="clickDatetimePicker(1)">
                  {{ formData.endDate ? formData.endDate : "请选择结束时间" }}
                </view>
              </view>
            </view>
            <u-subsection
              :list="tabs"
              active-color="#ff8440"
              :current="tabIndex"
              @change="changeTab"
            ></u-subsection>
          </view>
          <u-empty
            mode="data"
            text="暂无数据"
            v-if="dataList.length == 0"
            marginTop="10vh"
            :icon="getResource('img/phone/mini/no_data.png')"
          />
        </view>
        <scroll-view
          class="query_content"
          @scrolltolower="buttonScrolltolower"
          scroll-y="true"
          style="height: calc(40vh)"
        >
          <view class="list-view">
            <view
              class="list-item"
              v-for="(item, index) in dataList"
              :key="index"
              hover-class="hover"
              :hover-stay-time="150"
              @click="detail"
            >
              <view class="content-box">
                <view class="des-box">
                  <view class="tit">{{ item.balance_type_2_name }}</view>
                  <view
                    v-if="tabIndex === 3"
                    class="source"
                    :style="{
                      color:
                        item.balance_status === 1
                          ? '#4caf50'
                          : item.balance_status === 2
                          ? '#00b7ff'
                          : '#ff1e0f',
                    }"
                  >
                    提现 {{ item.balance_status_name }}
                  </view>
                  <view class="time">{{ item.created_at }}</view>
                </view>
              </view>
              <view class="money" :class="{ less: item.balance_type_2 == 302 }">
                {{ item.balance_type_2 == 302 ? "-" : "+" }}
                {{ item.num }}

                <!-- {{ tabIndex === 3 ? item.real_money : item.money }} -->
              </view>
            </view>
          </view>
        </scroll-view>

        <view class="tip">仅显示近一年内的收支记录</view>
      </view>
    </view>

    <u-datetime-picker
      :show="on_of"
      v-model="dateTime"
      mode="date"
      @close="on_of = false"
      format="YYYY-MM-DD"
      @confirm="dateTimeConfirm"
    ></u-datetime-picker>
  </view>
</template>

<script setup>
import { ref, reactive, toRefs } from "vue";
import { getResource } from "@/utils/Resource.js";
import { formatDate } from "@/utils/date.js";
import { getIntegralInfo, getIncomeInfo } from "../../api/userInfo";
import { onShow } from "@dcloudio/uni-app";
import { showLoading, showToast } from "@/utils/toast";
onShow(async () => {
  return await getIncomeInfo().then((res) => {
    // console.log("init " + JSON.stringify(res.data));
    topDetails.value = res.data;
  });
});

// 响应式数据
const state = reactive({
  // 弹窗控制
  showModal: false,
  on_of: false,
  dateTime: null,
  topDetails: {},
  // 标签页相关
  tabIndex: 0,
  tabs: ["本月收入", "今日收入", "昨日收入", "推广提现"],
  isWithdraw: false,
  // date: "this_month",
  income: null,
  // 日期相关
  // startDate: formatDate(new Date(), "YYYY-MM-DD"),
  // endDate: formatDate(new Date(), "YYYY-MM-DD"),

  // 列表数据
  // list: [],

  // 表单数据
  formData: {
    count: 0,
    page_no: 1,
    page_size: 10,
    page_count: 1,
    balance_type: 3,
    balance_type_2: null,
    time_type: "this_month",
    // startDate: formatDate(new Date(), "YYYY-MM-DD"),
    // endDate: formatDate(new Date(), "YYYY-MM-DD"),
    startDate: null,
    endDate: null,
  },

  // 其他数据
  dataList: [],
  ji_fen: "",
  isConfirm: false,
});

// 解构state
const {
  topDetails,
  income,
  showModal,
  on_of,
  dateTime,
  tabIndex,
  tabs,
  isWithdraw,
  // list,
  formData,
  dataList,
  isConfirm,
} = toRefs(state);

const init = async () => {
  console.log(formData.value);

  return await getIntegralInfo(formData.value).then((res) => {
    // console.log("init " + JSON.stringify(res.data));
    console.log(res);
    dataList.value = [...dataList.value, ...res.data.list];
    income.value = res.data.income;
    formData.value.count = res.data.count;
    formData.value.page_count = res.data.page_count;
    formData.value.page_no = res.data.page_no;
    formData.value.page_size = res.data.page_size;
  });
};
// 切换标签
const changeTab = async (index) => {
  dataList.value = [];
  // 公共逻辑提取
  tabIndex.value = index;
  // formData.value.startDate = formData.value.endDate = formatDate(
  //   new Date(),
  //   "YYYY-MM-DD"
  // );
  isWithdraw.value = index == 3;

  // 用配置表代替 switch-case
  const tabConfig = {
    0: { time_type: "this_month" },
    1: { time_type: "today" },
    2: { time_type: "yesterday" },
    3: { time_type: null, balance_type_2: 302 },
  };

  formData.value.time_type = tabConfig[index].time_type;
  if (index == 3) {
    formData.value.balance_type_2 = tabConfig[index].balance_type_2;
  } else {
    formData.value.balance_type_2 = 301;
  }
  // list.value = tabConfig[index].data;
  await init();
};

// 初始化
changeTab(0);

// 导航跳转
const navTo = () => {
  uni.navigateTo({ url: `/pages/user/component/Withdraw` });
};

// 日期选择器
const clickDatetimePicker = (e) => {
  isConfirm.value = e;
  on_of.value = true;
};

const dateTimeConfirm = (e) => {
  dataList.value = [];

  const formattedDate = formatDate(new Date(e.value), "YYYY-MM-DD");
  if (isConfirm.value == 0) {
    formData.value.startDate = formattedDate;
  } else {
    formData.value.endDate = formattedDate;
  }
  on_of.value = false;
  init();
};
const buttonScrolltolower = async () => {
  if (formData.value.count != dataList.value.length) {
    formData.value.page_no++;
    showLoading("加载中");
    await init();
  } else {
    showToast("已经最后一页了~");
  }
};
</script>
<style lang="scss" scoped>
// 样式穿透使用 :deep() 替代 ::v-deep（Vue 3 推荐写法）
:deep(.u-modal__content) {
  justify-content: flex-start;
}

.flex {
  display: flex;
  align-items: center;
  padding: 50rpx;
  position: relative;

  &-one {
    flex: 1;
    min-width: 0;
    font-size: 26rpx;
    color: #333;

    &-text {
      margin: 10rpx 0;
      color: #f5f5f5;
      font-weight: normal;
    }
  }
}

.ithui {
  &-content {
    .h5title {
      width: 100%;
      height: 120rpx;
      text-align: center;
      line-height: 200rpx;
      color: white;
      font-size: 34rpx;
      font-weight: bold;
      background: linear-gradient(to right, #ff8440, #ff1e0f);
    }

    .list-view {
      position: relative;
      width: 100%;
      overflow: hidden;
    }

    .list-item {
      width: 100%;
      padding: 30rpx 28rpx;
      box-sizing: border-box;
      background: #fff;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      border-bottom: 1rpx solid #eaeef1;
    }

    .item-last::after {
      left: 0 !important;
    }

    .content-box {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }

    .des-box {
      min-height: 80rpx;
      padding-left: 28rpx;
      box-sizing: border-box;
      vertical-align: top;
      color: #333;
      font-size: 28rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .tit {
      font-size: 32rpx;
      max-width: 420rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .source {
      margin: 12rpx 0;
    }

    .time {
      color: #888;
    }

    .money {
      font-size: 38rpx;
      font-weight: 500;
      color: #ff1e0f;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-left: 20rpx;
    }

    .less {
      color: #4caf50 !important;
    }

    .tip {
      margin-top: 50rpx;
      display: flex;
      justify-content: center;
      align-content: center;
      font-size: 24rpx;
      color: #888;
    }
  }

  &-view {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;

    .view-info {
      width: 100%;
      height: 100%;
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      padding-bottom: 116rpx;

      .userinfo {
        background: linear-gradient(to right, #ff8440, #ff1e0f);
        background-color: #ff8440;
        padding-bottom: 100rpx;

        .userinfo-headimg {
          width: 130rpx;
          height: 130rpx;
          border-radius: 100%;
          overflow: hidden;
          margin-right: 20rpx;
          border: 4rpx solid rgba(255, 255, 255, 0.3);
        }

        .arrow {
          position: relative;
          padding-right: 30rpx;

          span {
            font-size: 28rpx;
            color: white;
          }

          &:after {
            content: " ";
            display: inline-block;
            height: 12rpx;
            width: 12rpx;
            border-width: 4rpx 4rpx 0 0;
            border-color: #848484;
            border-style: solid;
            transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
            position: relative;
            top: -4rpx;
            position: absolute;
            top: 50%;
            margin-top: -8rpx;
            right: 4rpx;
            border-radius: 2rpx;
          }
        }

        .arrow-one:after {
          border-color: white;
          margin-top: -6rpx;
        }
      }

      .box {
        width: 94%;
        background: white;
        border-radius: 10rpx;
        margin: -120rpx auto 20rpx;
        box-shadow: 0 6rpx 20rpx #e7e7e7;

        .tx {
          padding-top: 26rpx;
          overflow: hidden;
          display: flex;
          justify-content: space-between;
          align-content: center;

          &-grid {
            box-sizing: border-box;

            &:first-child {
              margin-left: 40rpx;
            }

            &-comm-sign {
              display: block;
              border-radius: 40rpx 0 0 40rpx;
              font-size: 26rpx;
              padding: 16rpx 44rpx;
              background: linear-gradient(to right, #fef082, #ffc551);
              background-color: #fef082;
              color: #cf4400;
            }

            &-text {
              display: block;
              color: #333;
              font-size: 26rpx;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;

              .title {
                font-size: 32rpx;
                font-weight: normal;
                color: #ff6423;
              }

              .money {
                font-size: 60rpx;
                color: #ff6423;
                letter-spacing: 2rpx;
                margin-bottom: 10rpx;

                &-b {
                  font-size: 28rpx;
                }
              }
            }
          }
        }

        .palace {
          padding-bottom: 20rpx;
          overflow: hidden;
          display: flex;
          justify-content: center;

          &-grid {
            flex: 1;
            position: relative;
            box-sizing: border-box;

            &:not(:last-child) {
              &:after {
                width: 1rpx;
                height: 80rpx;
                background: #fddece;
                content: " ";
                display: inline-block;
                position: absolute;
                top: 0;
                right: 0;
              }
            }

            &-text {
              display: block;
              text-align: center;
              color: #333;
              font-size: 32rpx;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;

              &-name {
                font-size: 26rpx;
                font-weight: normal;
                color: #ff8a4a;
              }

              &-data {
                font-size: 32rpx;
                color: #ff8a4a;
                letter-spacing: 2rpx;
                margin-bottom: 5rpx;

                &-b {
                  font-size: 20rpx;
                }
              }
            }
          }
        }
      }
    }
  }
}

.date-picker-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  .date-picker {
    border: 1px solid #ccc;
    border-radius: 10px;
    text-align: center;
    color: #606266;
    padding: 5px 8px;
    font-size: 15px;
  }

  .date-separator {
    font-size: 14px;
    color: #606266;
  }
}
</style>
